<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host/* 当前服务器的主机号 */ + "/hall";// websocket请求地址
        var ws_hdl = null;// websocket连接

        /* 用户离开（关闭）页面前关闭websocket连接 */
        window.onbeforeunload = function () {
            ws_hdl.close();
        }

        /* 点击按钮的事件处理——开始匹配 */
        // 按钮有两个状态：没有进行匹配的状态，正在匹配中的状态
        var button_flag = "stop";// 没有进行匹配的状态

        
        var button_element = document.getElementById("match-button");// 获取button控件
        button_element.onclick = function ()/* button的点击事件 */ {
            // 1. 没有进行匹配状态下点击按钮，发送对战匹配请求
            if (button_flag == "stop") {// 收到对应的响应后再改变buffon_flag
                var req_json = {
                    optype: "match_start"
                }
                // 序列化请求并发送
                ws_hdl.send(JSON.stringify(req_json));
            }
            // 2. 正在匹配中的状态下点击按钮，发送停止对战匹配请求
            else{
                var req_json = {
                    optype: "match_stop"
                }
                // 序列化请求并发送
                ws_hdl.send(JSON.stringify(req_json));
            }
        }

        function get_user_info() {
            $.ajax({
                url: "/info",// 请求路径
                type: "GET",// 请求方式
                success: function (res/* json格式 */)/* 请求成功时的回调函数 */ {
                    var user_info = "<p>" + "用户：" + res.username + " 积分：" + res.score + "</br>" +
                        "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";

                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = user_info;

                    // 走到这里，用户信息已经获取成功
                    // 建立websocket连接
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;// wsbsocket连接建立成功的回调
                    ws_hdl.onclose = ws_onclose;// websocket连接关闭的回调
                    ws_hdl.onerror = ws_onerror;// 
                    ws_hdl.onmessage = ws_onmessgae;// 有消息到来的回调
                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("./login.html");
                }
            })
        }

        /* websocket连接建立成功回调 */
        function ws_onopen() {
            console.log("websocket onopen");
        }
        /* websocket连接关闭回调 */
        function ws_onclose() {
            console.log("websocket onclose");
        }
        /* websocket连接出错回调 */
        function ws_onerror() {
            console.log("websocket onerror");
        }
        /* websocket连接收到消息回调 */
        function ws_onmessgae(evt) {
            // alert(evt.data);
            // 获取响应的数据并反序列化
            var resp_json = JSON.parse(evt.data);
            // 获取失败
            if(resp_json.result == false){
                // alert("获取消息失败！将强制用户退出！");
                // console.log(resp_json.optype);
                alert(resp_json.reason);
                location.replace("/login.html");
                return;
            }

            // 走到这里，获取消息成功

            // 收到游戏大厅建立成功的响应
            if(resp_json["optype"] == "hall_ready"){
                alert("游戏大厅连接建立成功");
            }
            // 收到游戏大厅匹配成功建立房间成功的响应
            else if(resp_json["optype"] == "match_success"){
                // 对战匹配成功
                alert("对战匹配成功");
                location.replace("/game_room.html");
                return;
            }
            // 收到游戏大厅中收到消息的响应
            else if(resp_json["optype"] == "match_start"){
                console.log("玩家已经加入到匹配队列中...");
                // 收到响应，改变匹配按钮的状态为匹配中
                button_flag = "start";
                button_element.innerHTML = "匹配中... ...点击按钮停止匹配";
                return;
            }
            else if(resp_json["optype"] == "match_stop"){
                console.log("玩家已经停止匹配");
                // 收到响应，改变匹配按钮的状态为未匹配
                button_flag = "stop";
                button_element.innerHTML = "开始匹配";
                return;
            }
            else if(resp_json["optype"] == "unknown"){
                alert("匹配请求出错，将强制重新登陆！");
                location.replace("./login.html");
                return;
            }
        }
        get_user_info();// 函数调用
    </script>
</body>

</html>